<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14 vue的数据类型操作</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{num}}</h3>
        <h3>商品数量<input type="text" v-model = "goodsnum"></h3>
        <h3>商品价格<input type="text" v-model = "goodsprice"></h3>
        <h3>小计更新<span>{{goodsnum * goodsprice}}</span></h3>
    </div>
    
</body>

<script>

    new Vue({
        el : "#app",
        data : {
            num : 18,
            goodsnum : "",
            goodsprice : "",

        },
        mathods : {

        },
        watch : {
            num(num){
                console.log(this.num)
            }

        }
    })
  


</script>
</html>